<template>
  <div class="home" v-loading="loading">
    <div class="layout">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
      >
        <el-table-column label="" v-for="(item,index) in 12" :key="index">
          <template #default="{ row }">
            <el-button class="size1" :class="{'hide': !layoutIndexs.includes(row[index])}">
              <div v-if="isHasSetting(row[index]) != null">
                <img class="cardShowPic" :src="isHasSetting(row[index]).cardShowPic"/>
              </div>
              <div class="setting" @click.stop="cellClick(row[index])" v-if="isHasSetting(row[index]) == null">配置</div>
              <div class="d-flex" v-else>
                <div class="setting mr-3" @click.stop="cellClick(row[index])">配置卡片</div>
                <div class="setting" @click.stop="setData(row[index],isHasSetting(row[index]).cardCode)">配置参数</div>
              </div>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button type="primary" @click="saveCardSetting">保存</el-button>
      <el-button @click="goBack()">返回</el-button>
    </div>

    <!-- 配置卡片弹框 -->
    <yc-dialog ref="cardDialog" :dialogWidth="'55%'" :show-center="false" :dialogTitle="dialogTitle">
      <template #content>
        <div class="dialog-content">
          <el-form
            ref="newConfigCardFormRef"
            :model="newConfigCardModel"
            label-width="110px"
            size="medium"
            :inline="true"
          >
            <el-form-item label="卡片名称" prop="cardName">
              <el-input v-model="newConfigCardModel.cardName"/>
            </el-form-item>
            <el-form-item label="卡片大小" prop="cardSize">
              <el-select v-model="newConfigCardModel.cardSize">
                <el-option
                  v-for="item in zjSizeListData"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="卡片描述" prop="cardDes">
              <el-input v-model="newConfigCardModel.cardDes"/>
            </el-form-item>
            <el-form-item label="标题设置" prop="cardConfTitle">
              <el-select v-model="newConfigCardModel.cardConfTitle">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="颜色设置" prop="cardConfColor">
              <el-select v-model="newConfigCardModel.cardConfColor">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="图标设置" prop="cardConfIcon">
              <el-select v-model="newConfigCardModel.cardConfIcon">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="数值型变量设置" prop="cardConfInt">
              <el-select v-model="newConfigCardModel.cardConfInt">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="状态型变量设置" prop="cardConfStatus">
              <el-select v-model="newConfigCardModel.cardConfStatus">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="控制参数设置" prop="cardConfControl">
              <el-select v-model="newConfigCardModel.cardConfControl">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="流程设置" prop="cardConfFlow">
              <el-select v-model="newConfigCardModel.cardConfFlow">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="数据集设置" prop="cardConfData">
              <el-select v-model="newConfigCardModel.cardConfData">
                <el-option
                  v-for="item in isSetUp"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="pl-3">
                <el-button class="mr-2" type="primary" @click="searchClick" size="medium">搜索</el-button>
                <el-button type="warning" @click="resetClick" size="medium">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
          <div class="cardList">
            <div v-for="(cards, index) in cardList" :key="index">
              <img :src="cards.cardShowPic" @click="cardCode = cards.cardCode"/>
              <el-radio v-model="cardCode" :label="cards.cardCode">{{cards.cardName}}</el-radio>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="cardLoading" @click="cardSave">确定</el-button>
        <el-button @click="$refs.cardDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <!-- 配置参数弹框 -->
    <yc-dialog ref="setDataDialog" :dialogWidth="'60%'" :show-center="false" :dialogTitle="dialogTitle">
      <template #content>
        <div class="dialog-content">
          <el-card class="box-card mb-3">
            <div class="w-100 d-flex">
              <div class="w-25 mr-3">
                <div class="d-flex">
                  <div class="line"></div>
                  <div class="titleClass">组件</div>
                </div>
                <div class="imgHeight">
                  <img class="imgContent" :src="cardShowPic"/>
                </div>
              </div>
              <div class="w-75">
                <div class="d-flex">
                  <div class="line"></div>
                  <div class="titleClass">组件指导图</div>
                </div>
                <div class="imgHeight">
                  <img class="imgContent" :src="cardConfPic"/>
                </div>
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="w-100">
              <el-tabs v-model="activeName">
                <el-tab-pane v-if="tabsInfoObj.cardConfTitle=='Y'" label="标题设置" name="cardConfTitle">
                  <titleComponent ref="titleComponent" :data-list="tabsInfoObj.cardTitleData"></titleComponent>
                </el-tab-pane>
                <el-tab-pane v-if="tabsInfoObj.cardConfColor=='Y'" label="颜色设置" name="cardConfColor">
                  <colorComponent ref="colorComponent" :data-list="tabsInfoObj.cardColorData"></colorComponent>
                </el-tab-pane>
                <el-tab-pane v-if="tabsInfoObj.cardConfIcon=='Y'" label="图标设置" name="cardConfIcon">
                  <iconAndImgComponent ref="iconAndImgComponent"
                                       :data-list="tabsInfoObj.cardIconData"></iconAndImgComponent>
                </el-tab-pane>
                <el-tab-pane v-if="tabsInfoObj.cardConfInt=='Y'" label="数值型变量设置" name="cardConfInt">
                  <numericalComponent ref="numericalComponent"
                                      :data-list="tabsInfoObj.cardIntData"></numericalComponent>
                </el-tab-pane>
                <el-tab-pane v-if="tabsInfoObj.cardConfStatus=='Y'" label="状态型变量设置" name="cardConfStatus">
                  <statusComponent ref="statusComponent" :data-list="tabsInfoObj.cardStatusData"></statusComponent>
                </el-tab-pane>
                <el-tab-pane v-if="tabsInfoObj.cardConfControl=='Y'" label="控制参数设置" name="cardConfControl">
                  <controlParamComponent ref="controlParamComponent"
                                         :data-list="tabsInfoObj.cardControlData"></controlParamComponent>
                </el-tab-pane>
                <el-tab-pane v-if="tabsInfoObj.cardConfData=='Y'" label="数据集设置" name="cardConfData">
                  <dataSetComponent ref="dataSetComponent" :data-list="tabsInfoObj.cardDataData"></dataSetComponent>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-card>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="cardLoading" @click="setDataSave">确定</el-button>
        <el-button @click="$refs.setDataDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import titleComponent from "./configCard/title.vue"
  import colorComponent from "./configCard/color.vue"
  import iconAndImgComponent from "./configCard/iconAndImg.vue"
  import numericalComponent from "./configCard/numericalValue.vue"
  import statusComponent from "./configCard/statusValue.vue"
  import controlParamComponent from "./configCard/controlParam.vue"
  import dataSetComponent from "./configCard/dataSet.vue"
  import {
    queryList,
    queryCardList,
    bindCard,
    queryConfDataInfo,
    saveConfDataInfo
  } from "@/api/systemBuilding/layout"
  import { getBasePic } from "@/api/systemBuilding/pcSystemBuilding"

  export default {
    components: {
      ycDialog,
      titleComponent,
      colorComponent,
      iconAndImgComponent,
      numericalComponent,
      statusComponent,
      controlParamComponent,
      dataSetComponent
    },
    data() {
      return {
        systemCode: "",
        menuCode: "",
        customerCode: "",
        loading: false,
        tableData: [],  //表格，二维数组
        layoutTableSet: [],  //合并的集合
        layoutIndexs: [],   //合并格子的index
        hasSetting: [], //已设置的数组

        dialogTitle: "",

        newConfigCardModel: {
          cardName: "",
          cardSize: "",
          cardDes: "",
          cardConfTitle: "",
          cardConfColor: "",
          cardConfIcon: "",
          cardConfInt: "",
          cardConfStatus: "",
          cardConfControl: "",
          cardConfFlow: "",
          cardConfData: ""
        },
        zjSizeListData: ["1*1", "2*1", "3*1", "4*1", "1*2", "2*2", "3*2", "4*2", "5*2", "6*2", "1*3", "2*3", "3*3", "4*3", "5*3", "6*3", "6*6", "12*6"],
        isSetUp: [
          { value: "Y", name: "是" },
          { value: "N", name: "否" }
        ],
        cardList: [],
        indexNum: "",
        cardCode: "",  //选择的组件
        cardLoading: false,

        cardShowPic: "",
        cardConfPic: "",
        tabsInfoObj: {},
        activeName: "cardConfTitle"
      }
    },
    created() {
      this.systemCode = this.$route.query.systemCode
      this.menuCode = this.$route.query.menuCode

      this.getAccountData()
    },
    methods: {
      /**
       * 获取布局方法
       */
      async getAccountData() {
        this.loading = true
        this.tableData = []
        this.layoutTableSet = []
        this.layoutIndexs = []
        this.hasSetting = []

        const { object } = await queryList({
          systemCode: this.systemCode,
          menuCode: this.menuCode
        })
        let list = object || []
        list.forEach(item => {
          this.layoutTableSet.push({
            index: item.indexNum,
            col: item.sizeType.split("*")[1],
            row: item.sizeType.split("*")[0],
            ...item
          })
          // if (item.isBindCard == "Y") {  //Y绑定 N未绑定
          this.hasSetting.push({
            index: item.indexNum,
            cardCode: item.cardCode,
            cardShowPic: item.cardShowPic,
            cardConfPic: item.cardConfPic
          })
          // }
          this.layoutIndexs.push(item.indexNum)
        })

        for (let i = 1; i <= 6; i++) {
          let arr = []
          for (let j = 1; j <= 12; j++) {
            arr.push(j + (i - 1) * 12)
          }
          this.tableData.push(arr)
        }
        this.loading = false
        this.$nextTick(() => {
          this.tableRowClassName()
        })
      },

      /**
       * 合并表格方法
       */
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        let index = columnIndex + 1 + rowIndex * 12
        for (let i in this.layoutTableSet) {
          if (this.layoutTableSet[i].index == index) {
            return [this.layoutTableSet[i].col || 1, this.layoutTableSet[i].row || 1]
          } else if (this.layoutTableSet[i].row && this.layoutTableSet[i].col) {
            let arr = []
            for (let k = 0; k < this.layoutTableSet[i].col; k++) {
              for (let m = 0; m < this.layoutTableSet[i].row; m++) {
                if (k == 0 && m == 0) {
                  continue
                }
                arr.push(this.layoutTableSet[i].index + m + k * 12)
              }
            }
            if (arr.includes(index)) {
              return [0, 0]
            }
          } else if (this.layoutTableSet[i].row && (index > this.layoutTableSet[i].index && index < this.layoutTableSet[i].index + this.layoutTableSet[i].row)) {
            return [0, 0]
          } else if (this.layoutTableSet[i].col && (index > this.layoutTableSet[i].index && (index - this.layoutTableSet[i].index) % 12 == 0 && (index - this.layoutTableSet[i].index) / 12 < this.layoutTableSet[i].col)) {
            return [0, 0]
          }
        }
      },

      // 行样式调整
      tableRowClassName() {
        let rows = document.getElementsByClassName("el-table__row")
        let arr = []
        let obj = rows[0]
        let num = 1
        let height = document.getElementsByTagName("tbody")[0].getBoundingClientRect().height / 6
        for (let i = 0; i < rows.length; i++) {
          if (rows[i].childNodes.length == 0) {
            num++
            rows[i].className = "el-table__row row0"
            obj.style.height = height * num + "px"
          } else {
            obj = rows[i]
            num = 1
          }
          arr.push(rows[i].childNodes.length)
        }
        return ""
      },

      isHasSetting(index) {
        return this.hasSetting.find(item => {
          return item.index == index
        })
      },


      /**
       * 配置卡片
       */
      cellClick(index) {
        this.dialogTitle = "卡片库"

        this.indexNum = index

        // 根据块大小查询相对应的卡片
        this.searchCards()
        this.cardLoading = false
        this.$refs.cardDialog.dialogVisible = true
      },

      /**
       * 查询卡片
       */
      async searchCards() {
        const { status, object } = await queryCardList({
          ...this.newConfigCardModel
        })
        if (status == 200) {
          this.cardList = object || []
        }
      },
      // 查询卡片
      searchClick() {
        this.searchCards()
      },
      // 重置
      resetClick() {
        Object.keys(this.newConfigCardModel).forEach((item) => {
          this.newConfigCardModel[item] = ""
        })

        this.searchCards()
      },
      /**
       * 配置卡片保存
       */
      async cardSave() {
        this.cardLoading = true

        const { status, message } = await bindCard({
          systemCode: this.systemCode,
          menuCode: this.menuCode,
          indexNum: this.indexNum,
          cardCode: this.cardCode
        })
        if (status == 200) {
          this.getAccountData()
          this.$message.success(message)
          this.$refs.cardDialog.dialogVisible = false
        }
        this.cardLoading = false
      },

      /**
       * 配置参数
       */
      async setData(index, cardCode) {
        this.dialogTitle = "配置参数"

        this.activeName = "cardConfTitle"
        this.indexNum = index
        this.cardCode = cardCode
        this.cardShowPic = this.isHasSetting(index).cardShowPic
        this.cardConfPic = this.isHasSetting(index).cardConfPic

        this.queryConfDataInfo()
        this.cardLoading = false
        this.$refs.setDataDialog.dialogVisible = true
      },

      queryConfDataInfo() {
        queryConfDataInfo({
          systemCode: this.systemCode,
          menuCode: this.menuCode,
          indexNum: this.indexNum,
          cardCode: this.cardCode
        }).then(res => {
          this.tabsInfoObj = res.object
        })
      },
      /**
       * 配置参数保存
       */
      async setDataSave(index) {
        console.log(this.$refs.titleComponent.dataList, "titleComponent")
        console.log(this.$refs.colorComponent.dataList, "colorComponent")
        console.log(this.$refs.iconAndImgComponent.dataList, "iconAndImgComponent")
        console.log(this.$refs.numericalComponent.dataList, "numericalComponent")
        console.log(this.$refs.statusComponent.dataList, "statusComponent")
        console.log(this.$refs.controlParamComponent.dataList, "controlParamComponent")
        console.log(this.$refs.dataSetComponent.dataList, "dataSetComponent")

        // return
        // this.cardLoading = true

        // 标题设置数据包
        let cardTitleData = this.$refs.titleComponent.dataList
        // 颜色设置数据包
        let cardColorData = this.$refs.colorComponent.dataList
        // 图标设置数据包
        let cardIconData = this.$refs.iconAndImgComponent.dataList
        //数值型设置数据包
        let cardIntData = []
        let cardIntDataTemp = this.$refs.numericalComponent.dataList
        for (let i = 0; i < cardIntDataTemp.length; i++) {
          if (cardIntDataTemp[i].mapString1) {
            let tempObj = {
              seq: cardIntDataTemp[i].seq,
              key: cardIntDataTemp[i].mapString1[0].messages
            }
            cardIntData.push(tempObj)
          }
        }
        // console.log(cardIntData)

        //状态型设置数据包
        let cardStatusData = []
        let cardStatusDataTemp = this.$refs.statusComponent.dataList
        for (let j = 0; j < cardStatusDataTemp.length; j++) {
          if (cardStatusDataTemp[j].mapString1) {
            let tempObj = {
              seq: cardStatusDataTemp[j].seq,
              key: cardStatusDataTemp[j].mapString1[0].messages
            }
            cardStatusData.push(tempObj)
          }
        }
        // console.log(cardStatusData)

        // 控制参数设置
        let cardControlData = []
        let cardControlDataTemp = this.$refs.controlParamComponent.dataList
        for (let k = 0; k < cardControlDataTemp.length; k++) {
          if (cardControlDataTemp[k].deviceCode) {
            let tempObj = {
              seq: cardControlDataTemp[k].seq,
              deviceCode: cardControlDataTemp[k].deviceCode.split("&")[0],
              controlParam: cardControlDataTemp[k].controlParam
            }
            cardControlData.push(tempObj)
          }
        }
        // console.log(cardControlData)

        // 数据集设置数据包
        let cardDataData = []
        let cardDataDataTemp = this.$refs.dataSetComponent.dataList
        for (let h = 0; h < cardDataDataTemp.length; h++) {
          if (cardDataDataTemp[h].mapString1) {

            const item = cardDataDataTemp[h]

            let tempObj = {
              seq: item.seq,
              list: []
            }
            const tempArr = []
            for (let m = 0; m < item.mapString1.length; m++) {
              tempArr.push({
                key: item.mapString1[m].messages
              })
            }
            tempObj.list = tempArr
            cardDataData.push(tempObj)
          }
        }
        // console.log(cardDataData)

        const { status, message } = await saveConfDataInfo({
          dataString: JSON.stringify({
            systemCode: this.systemCode,
            menuCode: this.menuCode,
            indexNum: this.indexNum,
            cardCode: this.cardCode,
            cardTitleData,
            cardColorData,
            cardIconData,
            cardIntData,
            cardStatusData,
            cardDataData,
            cardControlData
          })
        })
        if (status == 200) {
          this.$message.success(message)
          this.$refs.setDataDialog.dialogVisible = false
        }
        // this.cardLoading = false
      },


      saveCardSetting() {
      },

      // 返回
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    width: 100%;
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
  }

  .layout {
    background: radial-gradient(#07424A 0%, #010B10 100%);
    flex: 1;

    .el-table {
      background-color: transparent;
      width: 100%;
      height: 100%;
      border: none;

      &::before {
        background-color: transparent;
      }

      ::v-deep.el-table__header-wrapper {
        display: none;
      }

      ::v-deep.el-table__body-wrapper, ::v-deep.el-table__body {
        width: 100%;
        height: 100%;

        tr {
          background-color: transparent;
          height: calc(100% / 6);

          &.row0 {
            height: 0;
          }

          &.el-table__row:hover {
            td {
              background-color: transparent;
            }
          }
        }

        td.el-table__cell {
          padding: 0;
          border: none;
        }

        .cell {
          height: 100%;
          padding: 8px;
        }
      }
    }

    .size1 {
      position: relative;
      background-color: transparent;
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 4px 0px #16D0FF;
      border: none;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      &.hide {
        display: none;
      }

      &:focus {
        background-color: transparent;
        color: #606266;
      }

      ::v-deep.el-icon-plus:before {
        font-size: 30px;
      }

      &.checked, &:hover {
        color: #409EFF;
        background-color: rgba(0, 0, 0, 0.6) !important;
      }

      .setting {
        position: relative;
        background: #0075b9;
        color: #FFF;
        padding: 5px 10px;
        border-radius: 4px;
        z-index: 10;
      }

      .cardShowPic {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .footer {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cardtitle {
    width: auto;
    padding-bottom: 2px;
    margin-bottom: 5px;
    border-bottom: 2px solid #3276ff;
    display: inline-block;
  }

  .cardList {
    display: flex;
    flex-wrap: wrap;

    & > div {
      max-width: 20%;
      padding: 15px;
    }

    img {
      width: 100%;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }

  .el-select--small, .el-cascader--small {
    width: 150px;
  }

  .picdiv {
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;

    .bgcss {
      max-width: 160px;
      max-height: 90px;
      cursor: pointer;
    }
  }

  .el-radio {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    ::v-deep.el-radio__label {
      margin-bottom: 5px;
    }
  }

  .imgHeight {
    height: 200px;
  }

  .line {
    width: 4px;
    height: 16px;
    background-color: #3276ff;
    margin-right: 10px;
    border-radius: 4px;
  }

  .titleClass {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }

  .imgContent {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
  }

  .w-25 {
    width: 25%;
  }

  .w-75 {
    width: 75%;
  }
</style>
